import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Dimensions,
    Text,
    View,
    TouchableOpacity,
    ImageBackground,
    Image,
    Platform,
    TextInput,DeviceEventEmitter
} from 'react-native';
import AndroidModule from '../../../../utils/AndroidConnent'


let vcodeLength = 17
const isIos = Platform.OS == 'ios';

export default class PublishCarVcode extends Component {

    constructor(props) {
        super(props);
        this.state = {
            vcode: this.props.vcode,
        }
    };

    componentDidMount() {
        this.vinScanResult = DeviceEventEmitter.addListener('vinScanResult', (result) => {
            
            if (result && result.vin) {
                this.setState({
                    vcode: result.vin
                }, function () {
                    if (this.props.vCodeChanged) {
                        this.props.vCodeChanged(result.vin)
                    }
                })

            }
        })
    }

    componentWillUnmount() {
        if (this.vinScanResult) {
            this.vinScanResult.remove();
        }
    }


    render() {
        return (
            <View style={styles.itemBox}>
                <View style={styles.itemLeftBox}>
                    <Text style={styles.itemTitleText}>VIN码<Text style={{ color: '#FB3D3C' }}>*</Text></Text>
                </View>
                <View style={styles.itemRightBox}>
                    <TextInput
                        keyboardType={isIos ? 'ascii-capable' : 'default'}
                        autoCorrect={false}
                        editable={true}
                        returnKeyType='done'
                        autoCapitalize='characters'
                        style={styles.textInput}
                        placeholder={'输入VIN码识别品牌车型'}
                        placeholderTextColor="#999999"
                        value={this.props.vcode}
                        maxLength={vcodeLength}
                        onChangeText={this.changeText.bind(this, 'vcode')}
                    />
                    <TouchableOpacity
                        activeOpacity={0.8}
                        style={styles.vCodeBox}
                        onPress={() => {
                            let params = {}
                            AndroidModule.selectCarVin(params, (error, result) => {
                                this.setState({
                                    vcode: result
                                }, function () {
                                    if (this.props.vCodeChanged) {
                                        this.props.vCodeChanged(result)
                                    }
                                })
                            })
                        }}
                    >
                        <Image style={styles.vImg} source={require('source/image/weibao/vin_scan.png')} />
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    //输入框内容输入
    changeText(type, val) {
        this.setState({
            [type]: val
        }, function () {
            if (this.props.vCodeChanged) {
                this.props.vCodeChanged(val)
            }
        })
    }

}

const styles = StyleSheet.create({
    itemBox: {
        width: '100%',
        height: 45,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    itemLeftBox: {
        width: 92,
    },
    itemRightBox: {
        flex: 1,
        height: '100%',
        marginLeft: 4,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    itemTitleText: {
        fontSize: 14,
        color: '#222222'
    },
    vCodeBox: {
        height: '100%',
        width: 40,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    vImg: {
        width: 18,
        height: 18
    },
    textInput: {
        color: '#333333',
        fontSize: 14,
        flex: 1,
        height: '100%',
    },


})